<script setup lang="ts">
import { useCurrentElement } from '@vueuse/core'
import type { BSegmentedProps, SegmentedOption } from './type.d'

withDefaults(defineProps<BSegmentedProps>(), {
  options: () => ['name1', 'name2751561', 'name3456'],
  disabled: false,
})
const emits = defineEmits<{
  change: [value: string | number]
}>()
defineSlots<{
  default: (props: SegmentedOption) => void
}>()
// ------------------use------------------
// #region
const container = useCurrentElement()
const active = defineModel<string | number>({
  default: (props: any) => {
    const v = props?.options[0]!
    if (typeof v === 'string') {
      return v
    }
    else {
      return v?.value ?? v.label
    }
  },
})
const [segmentedBlock, setSegmentedBlock] = useState({
  offset: 0,
  width: 0,
})
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
function isActive(raw: SegmentedOption | string) {
  if (typeof raw === 'string') {
    return raw === active.value
  }
  else {
    return (
      raw?.value === active.value
      || raw.label === active.value
    )
  }
}
function changeActive(
  raw: SegmentedOption | string,
  e: MouseEvent,
) {
  let v: string | number = ''
  if (typeof raw === 'string') {
    v = raw
  }
  else {
    v = raw?.value ?? raw.label
  }
  active.value = v
  const { x }
    = (container.value as HTMLElement)!.getBoundingClientRect()
  const { x: tx, width } = (
    e.target as HTMLElement
  )?.getBoundingClientRect?.()
  console.log(x, e)

  setSegmentedBlock({
    offset: tx - x,
    width,
  })
  emits('change', v)
}
// #endregion
</script>

<template>
  <div
    class="align-center b-segmented relative box-border flex"
    :style="{
      '--segmented-block-offset': `${segmentedBlock.offset}px`,
      '--segmented-block-width': `${segmentedBlock.width}px`,
    }"
    :class="[
      {
        disabled,
      },
    ]"
  >
    <div
      v-for="(item, i) in options"
      :key="i"
      class="b-segmented-item relative box-border"
      :class="{
        active: isActive(item),
        disabled: (item as any)?.disabled,
      }"
      @click="changeActive(item, $event)"
    >
      <template v-if="typeof item === 'string'">
        {{ item }}
      </template>
      <template v-else>
        <component
          :is="item.label(item)"
          v-if="
            item.label && typeof item.label === 'function'
          "
        />
        <component
          :is="item.label"
          v-else-if="
            item.label && typeof item.label === 'object'
          "
        />
        <template v-else>
          {{ item.label ?? item.value }}
        </template>
      </template>
    </div>
  </div>
</template>

<style lang="scss">
//------------------组件样式------------------
html.dark {
  .b-segmented {
    &-item.active {
      box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.03),
        0 1px 6px -1px rgba(255, 255, 255, 0.02),
        0 2px 4px 0 rgba(255, 255, 255, 0.02);
    }
  }
}
.b-segmented {
  --segmented-block-offset: 0px;
  --segmented-block-width: 0px;
  padding: 4px;
  width: max-content;
  background-color: var(--el-fill-color);
  border-radius: 4px;
  &::before {
    display: none;
    position: absolute;
    border-radius: inherit;
    left: 0px;
    box-sizing: border-box;
    background-color: red;
    height: calc(100% - 4px * 2);
    content: '';
    width: var(--segmented-block-width);
    transform: translate3d(
      var(--segmented-block-offset),
      0,
      0
    );
    transition: all 0.2s
      cubic-bezier(0.645, 0.045, 0.355, 1);
    // background-color: var(--el-bg-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
      0 1px 6px -1px rgba(0, 0, 0, 0.02),
      0 2px 4px 0 rgba(0, 0, 0, 0.02);
  }
  &-item {
    z-index: 9;
    cursor: pointer;
    padding-inline: 6px;
    min-height: 28px;
    line-height: 28px;
    border-radius: 4px;
    transition: all 0.3s;
    font-size: 14px;
    color: var(--el-text-color-secondary);

    &.active {
      background-color: var(--el-bg-color);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
        0 1px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px 0 rgba(0, 0, 0, 0.02);
      color: var(--el-text-color-primary);
    }
    &:not(.active):hover {
      background-color: var(--el-fill-color-light);
    }
  }
}
//-------------样式穿透-------------
</style>
